// 1、添加用户
$("#addUserForm").on("submit", function () {
  var formData = $(this).serialize();
  console.log(formData);
  $.ajax({
    type: "post",
    url: "/users",
    data: formData,
    success: (res) => {
      // 刷新页面
      location.reload();
      alert("添加成功");
    },
    error: (err) => {
      alert("添加失败");
    },
  });
  // 阻止表单提交行为
  return false;
});

// 2、 选择头像
$("#userForm").on("change", "#InputFile", function () {
  // files[0]是js的方法，jquery要加【0】转为js
  console.log($(this)[0].files[0]);

  var formData = new FormData();
  formData.append("avatar", this.files[0]); // 图片添加到formData中去

  $.ajax({
    type: "post",
    url: "/upload",
    data: formData,
    // 要求ajax不解析请求参数,因为是上传二进制文件图片
    processData: false,
    // 要求ajax不设置请求参数的类型
    contentType: false,
    success: (res) => {
      console.log(res);
      // 预览头像
      $("#preview").attr("src", res[0].avatar);
      // 隐藏域，把图片上传
      $("#hiddenAvatar").val(res[0].avatar);
    },
    error: (err) => {
      console.log("上传头像失败");
    },
  });
});

//   3、获取用户列表,渲染页面
$.ajax({
  type: "get",
  url: "/users",
  success: (res) => {
    console.log(res);
    const html = template("userListTpl", {
      data: res,
    });
    $("tbody").html(html);
  },
});

// 4-1、编辑用户信息,事件委托
$("tbody").on("click", ".editBtn", function () {
  var id = $(this).attr("data-id");
  console.log(id);

  $.ajax({
    // 请求地址：/users/:id
    url: `/users/${id}`,
    type: "get",
    success: (res) => {
      //   console.log(res);
      var html = template("editUserForm", res);
      //   console.log(html);
      $(".container-box").find(".user-info").html(html);
    },
  });
});
// 4-2、实现编辑操作,提交表单
$("#userForm").on("submit", "#addUserForm", function () {
  console.log(111);

  var formData = $(this).serialize();
  //    自定义属性用attr，固有属性用prop
  var id = $(this).attr("data-id");
  $.ajax({
    type: "put",
    url: `/users/${id}`,
    data: formData,
    success: function (res) {
      location.reload();
    },
  });
  return false;
});

// 5、删除用户
$("tbody").on("click", ".removeBtn", function () {
  var isRemove = confirm("您确定要删除该用户？");
  var id = $(this).attr("data-id");
  console.log(id);

  if (isRemove) {
    $.ajax({
      url: `/users/${id}`,
      type: "delete",
      success: (res) => {
        location.reload();
        if(id == sessionStorage.getItem('userId')){
          location.href = 'login.html'
        }
      },
    });
  }
});

// 6-1、全选
$("#checkAll").on("click", function () {
  var isChecked = $(this).prop("checked");
  console.log(isChecked);
  $("tbody").find("input").prop("checked", isChecked);
  // 批量删除
  if ($(this).prop("checked")) {
    $("#deleteAll").css("display", "block");
  } else {
    $("#deleteAll").css("display", "none");
  }
});
// 6-2、复选
$("tbody").on("change", ".userCheck", function () {
  // console.log($(this).parents('tr').find('.editBtn').attr('data-id'));
  var all = $("tbody").find("input").length; // 复选框总数
  var isall = $("tbody").find("input:checked").length;
  console.log("所有：", all, "  选中：", isall);
  if (all == isall) {
    console.log("是全选");
    $("#checkAll").prop("checked", true);
  } else {
    console.log("不是全选");
    $("#checkAll").prop("checked", false);
  }
  // 批量删除按钮是否显示
  if (isall > 0) {
    $("#deleteAll").css("display", "block");
  } else {
    $("#deleteAll").css("display", "none");
  }
});

// 6-3、批量删除
$("#deleteAll").on("click", function () {
  var ids = [];
  var str = "";
  var checked = $("tbody").find("input:checked");
  $.each(checked, (index, ele) => {
    ids.push($(ele).attr("data-id"));
  });
  console.log(ids);
  // 数组拼接为字符串
  $.each(ids, (index, ele) => {
    str += ele + "-";
  });
  str = str.substr(0, str.length - 1);
  console.log(str);
  var isRemove = confirm("您确定批量删除这些用户？");
  if (isRemove) {
    $.ajax({
      url: `/users/${str}`,
      type: "delete",
      success: (res) => {
        location.reload();
        console.log("删除成功");
      },
      error: (err) => {
        console.log(err);
      },
    });
  } else {
    return;
  }
});
